<template>
  <div class="foundation-frame-wrap">
    <iframe
      :src="bdTokenUrl"
      frameborder="0"
      scrolling="no"
      id="bdIframe"
      allowfullscreen
    ></iframe>
    <template v-if="isScene">
      <el-dialog
        :visible.sync="dialogVisible"
        width="1000px"
        :before-close="handleClose"
      >
        <prod-detail :prodId="prodId" @handleClose="handleClose"></prod-detail>
      </el-dialog>
    </template>
    <el-dialog
      v-if="queryDialogCompView"
      :visible="true"
      width="1000px"
      :before-close="queryDialogCompClose"
      :destroy-on-close="true"
      top="10vh"
      custom-class="historyWallDialog"
    >
      <component :is="queryDialogComp" :anchorId="anchorId"></component>
    </el-dialog>
  </div>
</template>

<script>
import prodDetail from "../../common/prodDetail"
import { mapState, mapMutations } from "vuex"
import anchorQuery from "../../common/anchorQuery"

export default {
  mixins: [anchorQuery],
  components: {
    prodDetail
  },
  data () {
    return {
      bdTokenUrl: "",
      dialogVisible: true,
      floor: "0"
    }
  },
  watch: {
    $route () {
      console.log("$route")

      this.getFloor()
      this.handle3DUrl()
      // this.handleQueryVideoIndex();
    },
    lang () {
      this.handle3DUrl()
    },
    prodId (v) {
      if (v) {
        this.dialogVisible = true
      }
    },
    dialogVisible (v) {
      if (!this.userInfo && v) {
        this.dialogVisible = false
        this.isShowLogin("show")
      }
    },
    queryDialogCompView (v) {
      if (!this.userInfo && v) {
        this.queryDialogCompView = false
        this.isShowLogin("show")
      }
    }
  },
  computed: {
    ...mapState(["lang", "userInfo"]),
    isScene () {
      let isScene = false
      if (this.prodId) {
        //  if (this.$store.state.userInfo == '') {
        //    this.$store.dispatch('isShowLogin','show');
        //    isScene = false;
        //  } else {
        isScene = true
        //  }
      }
      return isScene
    }
  },
  mounted () {
    this.getFloor()
    this.handle3DUrl()
  },
  methods: {
    ...mapMutations(["changeLang", "isShowLogin"]),
    handleClose () {
      this.dialogVisible = false
      this.prodId = ""
    },
    getFloor () {
      var floor = this.$route.query.floor
      if (floor != this.floor) {
        this.floor = floor
      }

      console.log("floor:" + this.floor)
    },
    handle3DUrl () {
      if (this.lang === "en") {
        this.bdTokenUrl =
          "https://showroom.covestro.com/3d/foundation/index.html?id=2&l=" +
          this.floor
      }
      if (this.lang === "zh") {
        this.bdTokenUrl =
          "https://showroom.covestro.com/3d/foundation/index.html?id=1&l=" +
          this.floor
      }
      if (this.lang === "de") {
        this.bdTokenUrl =
          "https://showroom.covestro.com/3d/foundation/index.html?id=2&l=" +
          this.floor
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.foundation-frame-wrap {
  position: relative;
  height: calc(100vh - 90px);
  iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  /deep/.el-dialog__headerbtn {
    top: 12px;
    right: 16px;
  }
  /deep/.el-dialog__body {
    padding: 20px 20px 80px 20px !important;
  }
}
</style>
